<template>
  <div class="clues-container">
    <a-card :bordered="false" class="userinfo-card">
      <div class="user-info-container">
        <div class="user-info-left-side">
          <div class="user-avatar-info">
            <a-avatar :size="74">
              <img alt="avatar" v-if="userDetail?.gender === 2" src="@/assets/images/women-avatar.png"/>
              <img alt="avatar" v-else-if="userDetail?.gender === 1" src="@/assets/images/man-avatar.png"/>
              <IconUser v-else />
            </a-avatar>
            <div class="user-info-mate">
                <span class="user-name">{{ userDetail?.name }}</span>
                <a-divider direction="vertical" />
                <img alt="avatar" :src="userBirthday"/>
                <span class="user-age" style="margin-left: 5px">
                    {{ userDetail.age }}
                </span>
                <a-divider direction="vertical" />
                <img alt="avatar" :src="userGender"/>
                <span class="user-sex" style="margin-left: 5px">
                    <span v-if="userDetail?.gender === 1">男</span>
                    <span v-if="userDetail?.gender === 2">女</span>
                </span>
            </div>
          </div>
        </div>
        <div class="user-form-container">
          <a-form
             auto-label-width
             label-align="left"
             :model="userInfoModel">
            <a-row :gutter="[0,0]">
              <a-col :span="formItemSpan">
                <a-form-item label="手机号:">
                  <a-space :size="12">
                    <span v-if="userInfoModel.mobile">{{ userInfoModel.mobile }}</span>
                    <span v-else>156****6534</span>
                    <a-button type="primary" @click="getFullPhone" :loading="loadingPhone">获取号码</a-button>
                  </a-space> 
                </a-form-item>  
               </a-col>
               <a-col :span="formItemSpan">
                  <a-form-item label="联系地址:">
                    <span>{{ getAreasName(userDetail.province) }}</span>
                    <span v-if="userDetail.city !== ''">- {{ getAreasName(userDetail.city) }}</span>
                    <span v-if="userDetail.district !== ''">- {{ getAreasName(userDetail.district) }}</span>
                  </a-form-item>  
               </a-col>
               <a-col :span="formItemSpan">
                  <a-form-item label="申请时间:">
                    <span>{{ compilationTime(userDetail.createtime) }}</span>
                  </a-form-item>  
               </a-col>
               <a-col :span="formItemSpan" style="padding-right: 3%;">
                  <a-form-item label="跟进状态:">
                    <a-select  v-model="userInfoModel.plan" placeholder="请选择" allow-clear>
                      <a-option v-for="(key,value,index) in cluePlanList" :key="index"
                      :value="value" :label="key" />
                    </a-select>
                  </a-form-item>  
               </a-col>
               <a-col :flex="300">
                  <a-form-item label="跟进详情备注:">
                   <a-space :size="18">
                    <a-input :style="{ width:'auto'}" v-model="userInfoModel.remark" placeholder="请输入内容" allow-clear />
                    <a-button type="primary" @click="onUpdatedUserInfo" :loading="loadingUpdate">确定修改</a-button>
                   </a-space> 
                  </a-form-item>  
               </a-col>
            </a-row>    
          </a-form>  
        </div>
      </div>
    </a-card>
    <a-card :bordered="false" class="userinfo-content">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" title="基本信息">
            <BasicInfo :userInfo="userDetail"/>
        </a-tab-pane>
        <a-tab-pane v-if="Number(showReport) == 1" key="2" title="全景雷达" class="atabpane">
          <userInfoReport v-if="Number(showReport) == 1" :data="clueReportDetailObj" />
        </a-tab-pane>

      </a-tabs>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { ref , reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router';
import { isNumber } from '@/utils/is';
import { useDictStore , useUserStore, useAppStore } from '@/store';
import userBirthday from '@/assets/images/user-birthday.svg?url'
import userGender from '@/assets/images/user-gender.svg?url'
import userInfoReport from './components/userInfo-tab/reportDetail.vue'
import BasicInfo from './components/userInfo-tab/basicInfo.vue'
import type { ClueItem, ClueBehaviorReportDetail } from '@/api/clues'

import { 
  getCluesDtails, 
  cluesPhoneViewed, 
  updateCommProgress,
  getClueSlectList
 } from '@/api/clues'
import { Message } from '@arco-design/web-vue';

const dictStore = useDictStore();
const userStore = useUserStore();
const router = useRouter();
const appStore = useAppStore()

const formItemSpan = computed(()=>{
   return appStore.device == 'mobile' ? 12 : 8
})

let showReport = computed(()=> 
  userStore.getUserRiskControlStatus
)

let userInfoModel = reactive({
    id: router.currentRoute.value.query?.uid,
    uid: null, name: '', age: null, plan: '',
    mobile: null, remark: '',
}) 

let userDetail = reactive<ClueItem>({
  id: 0,
  uid: 0,
  age: 0,
  gender: 0,
  city: '',
  province: '',
  name: '',
  mobile: '',
  work: '',
  channel_name: '',
  organization_name: '',
  plan: '',
  nickname: '',
  status: '',
  remark: '',
  identity: '',
  district: '',
  product_name: '',
  product_id: 0,
  region: '',
  sesame_score: 0,
  insurance: 0,
  car: 0,
  house: 0,
  stage: '',
  social_security: 0,
  accumulation_fund: 0,
  ip: '',
  phone_viewed: 0,
  baitiao_quota: '',
  update_num: undefined,
  createtime: undefined,
  deletetime: undefined,
  updatetime: undefined,
  business_owner: 0,
  loan_money: 0,
  huabei_quota: ''
});

let clueReportDetailObj = reactive<ClueBehaviorReportDetail>({
      id: 0,
      name: '',
      identity: '',
      loan_behavior_score: '',
      loan_count_1_month: '',
      loan_count_3_months: '',
      loan_count_6_months: '',
      loan_count_12_months: '',
      loan_count_24_months: '',
      loan_amount_1_month: '',
      loan_amount_3_months: '',
      loan_amount_6_months: '',
      loan_amount_12_months: '',
      loan_amount_24_months: '',
      loan_amount_1k_or_below_12_months: '',
      loan_amount_1k_3k_12_months: '',
      loan_amount_3k_10k_12_months: '',
      loan_amount_above_10k_12_months: '',
      loan_org_count_1_month: '',
      loan_org_count_3_months: '',
      loan_org_count_6_months: '',
      loan_org_count_12_months: '',
      loan_org_count_24_months: '',
      loan_financial_org_count_12_months: '',
      loan_financial_org_count_24_months: '',
      loan_online_org_count_12_months: '',
      loan_online_org_count_24_months: '',
      overdue_loan_count_m0_6m: '',
      overdue_loan_count_m0_12m: '',
      overdue_loan_count_m0_24m: '',
      overdue_loan_count_m1_6m: '',
      overdue_loan_count_m1_12m: '',
      overdue_loan_count_m1_24m: '',
      cumulative_overdue_amount_6m: '',
      cumulative_overdue_amount_12m: '',
      cumulative_overdue_amount_24m: '',
      normal_repayment_ratio: '',
      failed_deduction_count_1m: '',
      failed_deduction_count_3m: '',
      failed_deduction_count_6m: '',
      failed_deduction_count_12m: '',
      failed_deduction_count_24m: '',
      loan_performance_amount_1m: '',
      loan_performance_amount_3m: '',
      loan_performance_amount_6m: '',
      loan_performance_amount_12m: '',
      loan_performance_amount_24m: '',
      loan_performance_count_1m: '',
      loan_performance_count_3m: '',
      loan_performance_count_6m: '',
      loan_performance_count_12m: '',
      loan_performance_count_24m: '',
      last_performance_days: '',
      loan_behavior_confidence: '',
      loan_settled_orders: '',
      credit_loan_duration: '',
      last_loan_disbursement_time: ''
});

let loadingPhone = ref<boolean>(false);
let loadingUpdate = ref<boolean>(false);
const getAreasName = (code: string)=>{
   return dictStore.getCityNameByCode(code);
}

const cluePlanList = computed(()=>{
  return dictStore?.getProductCluePlan || {}
})

const onUpdatedUserInfo = ()=>{
  loadingUpdate.value = true;
  let { plan, remark, uid , id } = userInfoModel;
  updateCommProgress({
    uid: null, plan, remark,
    id: Number(router.currentRoute.value.query?.uid), 
  }).then(({ code }: any)=>{
    if(code == 1){
      loadingUpdate.value = false;
      Message.success('更新成功');
    }
  }).catch(()=>{
    loadingUpdate.value = false;
  })
}

let compilationTime = (time: number)=>{
  return dayjs(time * 1000).format('YYYY/MM/DD/HH:mm:ss')
}

onMounted(()=>{
  let uid = router.currentRoute.value.query?.uid as string;
  let plan = router.currentRoute.value.query?.plan as string;
  if(uid !== '' && isNumber(Number(uid))){
     getCluesDtails(uid).then(({ userInfo, clueReportDetail }: any)=>{
        userInfoModel = Object.assign(userInfoModel, {
           id: userInfo?.id,
           uid: userInfo?.uid,
           name: userInfo?.name,
           age: userInfo?.age,
           plan: userInfo?.plan,
           remark: userInfo?.remark,
        });

        userInfoModel.uid = userInfo?.uid,
        userInfoModel.plan = plan || userInfo?.plan;
        userDetail = Object.assign(userDetail, userInfo);
        clueReportDetailObj = Object.assign(clueReportDetailObj, clueReportDetail);
     });
  }
})

const getFullPhone = ()=>{
  loadingPhone.value = true;
  let uid = router.currentRoute.value.query?.uid;
  cluesPhoneViewed(Number(uid)).then(({ code, data } : any)=>{
    if(code == 1){
      loadingPhone.value = false;
      Message.success('获取成功');
      userInfoModel.mobile = data?.mobile
    }
  }).catch(()=>{
    loadingPhone.value = false;
  })
}

</script>



<style scoped lang='less'>

    .user-info-container{
      display: flex;
    }

    .userinfo-card,
    .userinfo-content{
      margin-bottom: 20px;
      background-color: var(--color-bg-2);
      border-radius: 4px;
    }

    .user-info-left-side{
       width: 348px;
    }

    .user-avatar-info{
      background: #409EFF;
      border-radius: 10px;
      padding: 18px 20px;
      display: flex;
      height: 110px;
      width: 348px;
      align-items: center;
    }

    .user-form-container{
      flex: 1;
      display: flex;
      padding-left: 4.3333333%;
      box-sizing: border-box;
      align-items: center;
    }

    .user-info-mate{
      display: flex;
      align-items: center;
      color: #F4F4F4;
      margin-left: 19px;
      .user-name{
        font-weight: bold;
        font-size: 24px;
      }
      .user-age,
      .user-sex{
        font-weight: 600;
        font-size: 16px;
      }
    }

    .atext-content{
      font-size: 14px;
      color: #333333;
    }

    .user-info-item-second{
      margin-top: 20px;
    }


    .userinfo-content-title{ 
      font-weight: bold;
      font-size: 16px;
      color: #333333;
    }

    .userinfo-content-item{
       margin-top: 16px;
       margin-bottom: 40px;
    }

    .base-info-row{
      margin-top: 27px;
    }

    .atabpane{
      padding: 0px 10px 52px 10px;
    }

    .model-title-text{
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      padding-left: 17px;
      border-left: 2px solid #409EFF;
    }
        
    .arco-form-item {
      margin-bottom: 10px;
    }

</style>


<style lang="less" scoped>
  .mobile {
    .user-info-left-side{
      width: 100%;
      margin-bottom: 30px;
    }
    .user-form-container{      
      padding-left: 0;
    }  

    .user-info-container{
      display: block;
    }
  }
</style>


<style>


</style>